<template>
  <el-header v-show="show" class="container-fluid head">
    <div class="row">
      <div class="col col8 position-relative">

        <div class="text-left position-absolute nav">
          <div class="d-inline-block mr-1" v-if="!timeshow">
            结束剩余
            <span>{{ time.d }}</span>
            天
            <span>{{ time.h }}</span>
            时
            <span>{{ time.m }}</span>
            分
            <span>{{ time.s }}</span>
            秒
          </div>


        </div>

        {{ title }}

        <div class="text-right position-absolute nav">
          <span class="savetime" v-show="savetime">已保存 {{ savetime }} <el-icon>
              <UploadFilled />
            </el-icon></span>
          <el-button size="default" :loading="saveloading" class="a18" @click="save">保存试卷</el-button>
          <el-button size="default" v-if="isMatch && match.format === 'IOI'" class="a18"
            @click="submit(false)">提交题目</el-button>

          <el-button size="default" v-else class="a18" @click="submit">提交试卷</el-button>
        </div>
      </div>
    </div>
  </el-header>
</template>

<script lang="ts">
import { UploadFilled } from '@element-plus/icons-vue';
import { defineComponent, ref } from "vue";
import { useStore } from "vuex";
import { Storekey } from "../../../interface";
export default defineComponent({
  props: ["time", "title", "submit", "timeshow", 'save', 'saveloading', 'savetime', 'match', 'isMatch'],
  components: { UploadFilled },
  setup() {
    const store = useStore(Storekey);
    const show = ref(true);

    return {
      show,
      user: store.state.user,
    };
  },
});
</script>

<style scoped>
.head {
  line-height: 66px;
  height: 66px;
  background: var(--color-43);
  background-image: url(https://cdn-hterobot.oss-cn-qingdao.aliyuncs.com/JOY/CloudClassroom/logo_whtite.svg);
  background-position-x: 24px;
  background-position-y: center;
  background-size: 32;
  background-repeat: no-repeat;
  box-shadow: 0px 3px 6px rgba(114, 114, 114, 0.16);
  z-index: 10;
  margin-bottom: 4px;
}

.col8 {
  font-size: 20px;
  font-family: Microsoft YaHei;
  font-weight: bold;
  color: #fff;
  text-align: center;
}

.text-right {
  font-size: 14px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #fff;
  right: 5px;
  top: 19px;
  height: 28px;
  line-height: 28px;
}

.text-left {
  top: 19px;
  height: 28px;
  line-height: 28px;
  left: 200px;
  font-size: 14px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #fff;
}


.text-left span {
  width: auto;
  border-radius: 2px;
  display: inline-block;
  text-align: center;
  color: var(--color-cheng3);
}



.text-right button {
  margin-left: 10px;
  margin-right: 10px;
}

.a18 {
  border: 1px solid #dcdfe6;
  border-radius: 2px;
  transform: translateY(-3px);
}

.a18:hover {
  background: var(--el-button-hover-bg-color);
  border-color: var(--color-cheng3) !important;
  color: #fff;
  transform: translateY(-3px);
}

.savetime {
  color: #8a8f8d !important;
  font-size: 12px;
  width: 150px !important;
  text-align: center;
}
</style>